<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--小区数据-->
            <el-col :span="24" :xs="24">
                <el-card class="box-card">
                    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                        label-width="68px">
                        <el-form-item label="客户类型" prop="customerType">
                            <el-select v-model="queryParams.customerType" filterable placeholder="请选择" style="width: 150px">
                                <el-option v-for="dict in dict.type.customer_type" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属小区" prop="areaId">
                            <treeselect v-model="queryParams.areaId" :options="areaOptions" :show-count="true"
                                placeholder="请选择所属小区" style="width: 150px" />
                        </el-form-item>
                        <el-form-item label="查询年" prop="queryDate">
                            <el-date-picker v-model="queryParams.queryDate" type="year" placeholder="选择年"
                                value-format="yyyy">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="营业点" prop="deptId">
                            <treeselect v-model="queryParams.deptId" :options="deptOptions" :show-count="true"
                                placeholder="请选择营业点" style="width: 150px" />
                        </el-form-item>

                        <el-form-item label="营业员" prop="createBy">
                            <el-select v-model="queryParams.createBy" placeholder="请选择营业员" style="width: 150px">
                                <el-option v-for="item in salesmanList" :key="item.userName" :label="item.userName"
                                    :value="item.userName" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-card class="box-card">
                        <div class="head_box">
                            <div v-for="(item, index) in headList" :key="index" class="head_box_value">
                                <img :src="item.url" alt="" class="head_box_img">
                                <span>{{ item.name }}：</span>
                                <span>{{ item.value }}</span>
                            </div>
                        </div>
                    </el-card>
                    <el-row :gutter="10" class="mb8" style="margin-top:20px">
                        <el-col :span="1.5">
                            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                                v-hasPermi="['fileManagement:civilArchivesQuery:export']">导出</el-button>
                        </el-col>
                        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                    </el-row>

                    <el-table v-loading="loading" :data="userList" border>
                        <el-table-column label="销售日期" align="center" key="createTime" prop="createTime"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="购气笔数" align="center" key="purchaseCount" prop="purchaseCount"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="购气气量" align="center" key="purchaseVolume" prop="purchaseVolume"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="购气金额" align="center" key="purchaseAmount" prop="purchaseAmount"
                            :show-overflow-tooltip="true" />
                        <!--                        <el-table-column label="补卡笔数" align="center" key="supplementCount" prop="supplementCount"-->
                        <!--                            :show-overflow-tooltip="true" />-->
                        <!--                        <el-table-column label="补卡气量" align="center" key="supplementVolume" prop="supplementVolume"-->
                        <!--                            :show-overflow-tooltip="true" />-->
                    </el-table>
                    <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { listSaleman, yearReport, yearReportTotal } from '@/api/report/reportForms.js'
import { areaTreeList } from "@/api/fileManagement/areainfo.js"
import { deptTreeSelect, } from "@/api/system/user";
import Treeselect from '@riophae/vue-treeselect'
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    name: "TurnoverYear",
    components: { Treeselect },
    dicts: ["customer_type"],
    data() {
        return {
            // 片区树选项
            areaOptions: undefined,
            // 企业树选项
            deptOptions: undefined,
            salesmanList: [], //营业员
            headList: [
                {
                    name: '购气笔数',
                    value: '0',
                    url: require('../../../assets/icons/shishou.png')
                },
                {
                    name: '购气量',
                    value: '0',
                    url: require('../../../assets/icons/yongqi.png')
                },
                {
                    name: '购气金额',
                    value: '0',
                    url: require('../../../assets/icons/shishou.png')
                },
                // {
                //     name: '补气笔数',
                //     value: '0',
                //     url: require('../../../assets/icons/yongqi.png')
                // },
                // {
                //     name: '补气量',
                //     value: '0',
                //     url: require('../../../assets/icons/shishou.png')
                // },
                // {
                //     name: '补气金额',
                //     value: '0',
                //     url: require('../../../assets/icons/yongqi.png')
                // },
            ],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 小区表格数据
            userList: null,
            // 弹出层标题
            title: "",
            //表计弹出层标题
            title2: "",
            // 企业名称
            deptName: undefined,
            // 表单参数
            form: {},
            defaultProps: {
                children: "children",
                label: "label",
            },
            // 查询参数
            queryParams: {
                customerType: undefined,
                areaId: undefined,
                queryDate: undefined,
            },

            activeName: "1",
            tableData: [],

            value2: "",
            radio: 1,
            value3: "",

        };
    },
    watch: {
        // 根据名称筛选企业树
        deptName(val) {
            this.$refs.tree.filter(val);
        },
    },
    created() {
        this.getList();
        this.getDeptTree();
        this.getDeptTree1()
        this.getAll()
        this.getSalesmanList();
    },
    methods: {
        /** 查询企业下拉树结构 */
        getDeptTree1() {
            areaTreeList().then((response) => {
                this.areaOptions = response.data;
            });
        },
        // 统计获取
        getAll() {
            let obj = JSON.parse(JSON.stringify(this.queryParams))
            yearReportTotal(obj).then((item) => {
                this.headList.map((res) => {
                    if (res.name == '购气笔数') {
                        res.value = item.data.purchaseCountTotal
                    } else if (res.name == '购气量') {
                        res.value = item.data.purchaseVolumeTotal
                    } else if (res.name == '购气金额') {
                        res.value = item.data.purchaseAmountTotal
                    }
                    // else if (res.name == '补气笔数') {
                    //     res.value = item.data.supplementCountTotal
                    // } else if (res.name == '补气量') {
                    //     res.value = item.data.supplementVolumeTotal
                    // } else if (res.name == '补气金额') {
                    //     res.value = item.data.supplementAmountTotal
                    // }
                })
            })
        },
        /** 查询小区列表 */
        getList() {
            this.loading = true;
            let obj = JSON.parse(JSON.stringify(this.queryParams))
            yearReport(obj).then((response) => {
                this.userList = response.data;
                this.loading = false;
            });
        },
        /** 查询营业点下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                this.deptOptions = response.data;
            });
        },
        // 获取营业员列表
        getSalesmanList() {
            listSaleman().then(
                (response) => {
                    this.salesmanList = response.data;
                }
            );
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList();
            this.getAll()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                "system/purchaseStatistics/yearReportExport",
                {
                    ...this.queryParams,
                },
                `营业年报表_${new Date().getTime()}.xlsx`
            );
        },
    },
};
</script>
<style lang="scss" scoped>
.head-containers {
    width: 200px;
    overflow: auto;

    .el-tree {
        min-width: 100%;
        display: inline-block !important;
    }
}

.tablex {
    width: 100%;
    border-collapse: collapse;
    border-color: #ebeef5;

    td {
        width: 25%;
        padding: 10px;
        color: #606266;
        font-size: 14px;
    }

    .lables {
        background: rgba(150, 154, 184, 0.05);
        text-align: right;
    }
}

.head_box {
    width: 100%;
    height: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .head_box_value {
        width: 30%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;

        .head_box_img {
            display: inline-block;
            width: 25px;
            height: 25px;
            margin-right: 15px;
        }
    }
}
</style>
